<template>
    <div class="blog-list">
        <!-- 顶部导航 -->
        <van-nav-bar title="博客列表" />

        <!-- 列表数据 -->
        <van-row
            class="list-item"
            v-for="blog in list"
            :key="blog.id"
            @click="$router.push(`/blogs/detail/${blog.id}`)"
        >
            <!-- 列表头部 -->
            <van-row
                class="list-item-header"
                type="flex"
                justify="space-between"
            >
                <van-col span="16">
                    <div class="van-multi-ellipsis--l2">{{ blog.title }}</div>
                </van-col>

                <div span="8" v-if="blog.uid === user.id">
                    <van-button
                        type="info"
                        plain
                        hairline
                        size="mini"
                        @click="$router.push(`/blogs/edit/${blog.id}`)"
                        >编辑</van-button
                    >
                    <van-button type="danger" plain hairline size="mini"
                        >删除</van-button
                    >
                </div>
            </van-row>

            <!-- 列表内容 -->
            <van-row class="list-item-body" type="flex" align="center">
                <img :src="avatarUrl" alt="头像" />
                <span>{{ blog.nickname }}</span>
                <span>{{ blog.create_time | dateFormat }}</span>
            </van-row>
        </van-row>

        <!-- 添加博客 -->
        <van-button
            class="plus-btn"
            icon="plus"
            type="info"
            @click="$router.push('/blog/add')"
            >添加</van-button
        >
    </div>
</template>

<script>
import avatarUrl from "@/assets/logo.png";
export default {
    created() {
        this.getList();
    },
    data() {
        return {
            avatarUrl,
            list: [],
            user: JSON.parse(window.sessionStorage.getItem("user")),
        };
    },
    methods: {
        async getList() {
            const res = await this.$http.get("/blogs");
            this.list = res.data.list;
        },
    },
};
</script>

<style lang="less" scoped>
.blog-list {
    height: 100%;
    background-color: #eee;

    .list-item {
        margin: 8px 5px;
        background-color: #fff;
        padding: 5px 10px;

        .list-item-header {
            font-size: 14px;
            color: #333;
        }

        .list-item-body {
            color: #999;

            img {
                width: 24px;
                height: 24px;
                border-radius: 50%;
                background-color: #eee;
                margin-right: 5px;
            }

            span {
                margin-right: 15px;
            }
        }
    }

    .plus-btn {
        width: 100%;
    }
}
</style>
